<template>
	<div>

		<div class="action-wrap">
			<div class="btn-add">
				<el-button size="small" type="primary" icon="el-icon-plus" @click="openForm(false)">添加管理员</el-button>
			</div>
			<el-form inline size="small">
				<el-form-item>
					<el-select v-model="roleId" placeholder="选择角色" @change="findAdmins">
						<el-option label="全部角色" :value="0"></el-option>
						<el-option v-for="item in roles" :key="item.id" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-input placeholder="输入管理员昵称、手机号" v-model="keyword" maxlength="20" prefix-icon="el-icon-search">
						<el-button slot="append" @click="findAdmins">搜索</el-button>
					</el-input>
				</el-form-item>
			</el-form>
		</div>

		<!-- 用户列表 -->
		<el-table class="admins-wrap" :data="admins" v-loading="loading" stripe>
			<el-table-column label="头像">
				<template slot-scope="scope">
					<div class="avatar-wrap">
						<el-avatar class="avatar" :src="scope.row.avatarUrl" shape="square"></el-avatar>
						<span class="name elip" :title="scope.row.name">{{scope.row.name}}</span>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="手机号" prop="phone" align="center"></el-table-column>
			<el-table-column label="角色" prop="role" align="center"></el-table-column>
			<el-table-column label="创建时间" prop="createTime" align="center"></el-table-column>
			<el-table-column label="操作" align="center">
				<template slot-scope="scope" v-if="scope.row.roleId != 1">
					<el-button type="text" size="small" icon="el-icon-edit-outline" @click="openForm(scope.row)">编辑</el-button>
					<el-button type="text" size="small" icon="el-icon-edit-outline" @click="deleteAdmin(scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页条 -->
		<div class="pagination-wrap" v-show="totalSize > pageSize">
			<el-pagination hide-on-single-page background @size-change="pageSizeChange" @current-change="pageNumberChange"
			 :current-page="pageNumber" :page-sizes="[10, 20, 30, 40, 50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
			 :total="totalSize">
			</el-pagination>
		</div>

		<el-dialog :title="`${formData.id ? '编辑' : '添加'}管理员`" :visible.sync="showDialog" width="30vw">
			<el-form label-width="80px">
				<el-form-item label="账号">
					<el-select :disabled="formData.id != undefined" v-model="formData.phone" filterable remote placeholder="用户手机号"
					 :remote-method="searchUsers" :loading="userLoading" class="w-100">
						<el-option v-for="item in users" :key="item.phone" :label="item.phone" :value="item.phone"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="角色">
					<el-select v-model="formData.roleId" placeholder="选择管理员角色" class="w-100">
						<el-option v-for="item in roles" :key="item.id" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<span slot="footer">
				<el-button @click="showDialog = false;">取消</el-button>
				<el-button type="primary" @click="submitForm">确定</el-button>
			</span>
		</el-dialog>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				admins: [],
				roles: [],
				roleId: 0,
				keyword: '',
				loading: false,
				pageNumber: 1,
				pageSize: 10,
				totalSize: 0,
				showDialog: false,
				formData: {
					phone: '',
					roleId: ''
				},
				userLoading: false,
				users: []
			}
		},
		created() {
			this.findAdmins();
			this.findRoles();
		},
		watch: {
			showDialog(e) {
				if (!e) {
					this.formData = {
						phone: '',
						roleId: ''
					};
				}
			}
		},
		methods: {
			findAdmins(isSwitchPage = false) {
				if (!isSwitchPage) this.pageNumber = 1;

				this.loading = true;
				const {
					roleId,
					keyword,
					pageNumber,
					pageSize
				} = this;
				this.$util.request('/administrator', {
					roleId,
					keyword,
					pageNumber,
					pageSize
				}, (res) => {
					this.loading = false;
					this.admins = res.list;
					this.totalSize = res.totalRow;
				}, true);
			},
			findRoles() {
				this.$util.request('/role', {}, (res) => {
					this.roles = res;
				}, true);
			},
			pageSizeChange(e) {
				this.pageSize = e;
				this.findadmins(true);
			},
			pageNumberChange(e) {
				this.pageNumber = e;
				this.findadmins(true);
			},
			openForm(item) {
				if (item) this.formData = Object.assign({}, item);
				this.showDialog = true;
			},
			searchUsers(keyword) {
				this.userLoading = true;
				this.$util.request('/user/assist', {
					keyword
				}, (res) => {
					this.userLoading = false;
					this.users = res;
				}, true);
			},
			submitForm() {
				if (!this.formData.phone) return this.$util.msg('请输入用户手机号');
				if (!this.formData.roleId) return this.$util.msg('请选择管理员角色');

				this.$util.requestWithConfirm('确定提交吗？', `/administrator/${this.formData.id ? 'update' : 'save'}`, {
					roleId: this.formData.roleId,
					phone: this.formData.phone,
					id: this.formData.id
				}).then(_ => {
					this.showDialog = false;
					this.findAdmins();
				});
			},
			deleteAdmin(item) {
				this.$util.requestWithConfirm(`确定删除管理员【${item.phone}】吗？`, '/administrator/delete', {
					id: item.id
				}, '警告', '删除').then(_ => {
					this.findAdmins();
				});
			}
		}
	}
</script>

<style lang="scss">
	.action-wrap {
		@extend %flex-align-center;
		margin-bottom: 10px;

		.btn-add {
			flex: 1;
			margin-top: -10px;
		}

		.el-input {
			width: 260px;
		}
	}

	.admins-wrap {
		.cell {
			admin-select: text;
		}

		.avatar-wrap {
			@extend %flex-align-center;

			.avatar {
				flex-shrink: 0;
			}

			.name {
				margin-left: 10px;
				max-width: 200px;
				display: inline-block;
			}
		}
	}
</style>
